<!-- 学生成绩管理页面 -->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/css/font.css">
		<link rel="stylesheet" href="/css/xadmin.css">
	</head>

	<body>
		<div class="x-body" id="app">
             <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);"
           title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
          <span class="x-right" style="line-height:40px;float:left">共有数据：{{ stuScores.length }} 条</span>
             <input type="hidden" name="stuId" th:attr="value=${stuId}"/>
             <input type="hidden" name="stuNo" th:attr="value=${stuNo}"/>
			<table class="layui-table">
				<thead>
					<tr>
						<th>课程代码</th>
                        <th>课程名称</th>
                        <th>课程性质</th>
                        <th>成绩</th>
                        <th width="150">操作</th>
				</thead>
				<tbody>
					<tr v-for="stuScore in stuScores">
						<td>{{ stuScore.courseNo }}</td>
                        <td>{{ stuScore.courseName }}</td>
                        <td v-if="stuScore.courseType == 1">必修</td>
                        <td v-if="stuScore.courseType == 2">专业选修</td>
                        <td>{{ stuScore.score }}</td>
                        <td class="td-manage">
                            <button class="layui-btn layui-btn layui-btn-sm" onclick="edit_stuScore(this)"  href="javascript:;"
                                :data-id='stuScore.id' :data-score="stuScore.score" :data-courseNo="stuScore.courseNo" :data-courseName="stuScore.courseName" :data-tchCourseId="stuScore.tchCourseId" :data-courseType="stuScore.courseType">
                                <i class="layui-icon">&#xe640;</i>编辑成绩
                            </button>
                        </td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/xadmin.js"></script>
        <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="/js/vue.min.js"></script>
        <script type="text/javascript" src="/js/jquery.form.js"></script>
		<script>
			var vm = new Vue({
	            el : '#app',
	            data : {
	                // 该学生所有课程成绩
	                stuScores : "",
	                // 当前学生id
	                stuId: "",
	                stuNo : ""
	            },
	            created : function() {
	                this.stuId = $("input[name='stuId']").val();
	                this.stuNo = $("input[name='stuNo']").val();
	                // 获取该学生所有课程成绩
	               this.listStuScore(this.stuId);
	            },
	            methods : {
	            	listStuScore : function(stuId) {
	                    var vm = this;
	                    $.ajax({
	                        url : "/sys/student/score/listStuScore",
	                        data: {
	                        	stuId: stuId
	                        },
	                        type : "get",
	                        success : function(result) {
	                            if (result.state) {
	                                vm.stuScores = result.data;
	                            } else {
	                                layui.use(['layer'], function(){
	                                    var layer = layui.layer
	                                    layer.msg(""+result.msg, {icon: 5});
	                                });
	                            }
	                        }
	                    });
	                }
	            }
	        });
			
			// 编辑成绩 
            function edit_stuScore(obj) {
                var courseName = $(obj).attr("data-courseName");
                var courseType = $(obj).attr("data-courseType");
                var courseNo = $(obj).attr("data-courseNo");
                var id = $(obj).attr("data-id");
                var score = $(obj).attr("data-score");
                var tchCourseId = $(obj).attr("data-tchCourseId");
                layer.open({
                    type: 1, //Page层类型
                    btn: ["确定", "取消"],
                    title: '编辑成绩',
                    skin: 'layui-layer-prompt',
                    content: "<input type='text' class='layui-layer-input' disabled value='"+ courseName +"'><br><input type='number'  value='"+score+"' class='layui-layer-input' placeholder='课程成绩'>",
                    yes: function(index, layero) {
                        // 按钮【按钮一】的回调
                        var score = $(layero).find("input[type='number']").val();
                        // 数据检验
                        if (score <= 0 || score > 100) {
                            layer.msg('请输入正确的课程成绩', {
                                icon: 5,
                                time: 1000
                            });
                            return;
                        }
                        // 保存
                        $.ajax({
                            url: "/sys/student/score/saveStuScore",
                            data: {
                                id: id,
                                stuNo: vm.stuNo,
                                tchCourseId: tchCourseId,
                                courseType: courseType,
                                courseNo: courseNo,
                                score: score
                            },
                            type: "post",
                            success: function(result) {
                                if (result.state) {
                                    layer.msg("编辑成功", {
                                        icon: 1
                                    });
                                    vm.listStuScore(vm.stuId);
                                    // 关闭
                                    layer.close(index);
                                } else {
                                    layer.msg("" + result.msg, {
                                        icon: 5
                                    });
                                }
                            }
                        });
                    }
                })
            }
		</script>
	</body>

</html>
